<template lang="html">
    <div class="user-io-page normal-table-page">
        <Card :dis-hover="true">
            <p slot="title">
                <Icon type="arrow-swap"></Icon> 客户收支
            </p>
            <div slot="extra">

                <Input v-model="searchKey" class="search-input" icon="search" placeholder="订单号、手机号" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
            </div>
            <Table :columns="userIoListColumns" :loading="pageLoading" ref="userIoList" border :data="userIoList"></Table>

            <div class="page-ctrl"  v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                </Page>
            </div>
        </Card>
    </div>
</template>

<script src="./user-io.js">

</script>

<style lang="scss" src='./user-io.scss'>
</style>
